<template>
	<view class="collect-miniapp" v-if="isShow" :style="'top:' + offsetTop + 'px;'">
		点击“ <text class="iconfont icon-sangedian"></text> ”添加至我的小程序，微信首页下拉即可快速访问
		<text class="iconfont icon-cha1" @tap="hideHandle"></text>
		<text class="iconfont icon-arr-top"></text>
	</view>
</template>

<script>
	var head = require('../../utils/customHead.js');
	var _this;
	var systemInfo = {};
	export default {
		name: 'collectMiniapp',
		data () {
			return {
				isShow: false,
				totalH: 0,
				offsetTop: 10
			}
		},
		props: ['appScene'],
		watch: {
			appScene: {
				immediate: true,
				handler: function (scene) {
					// 小程序进入场景值
					if (scene != '1001' && scene != '1089') {
						console.log('collect_scene', scene);
						let isShow = uni.getStorageSync('showCollectMiniapp')
						if (!isShow) {
							this.isShow = true
						}
					} 
				}
			}
		},
		mounted () {
			_this = this;
			systemInfo = wx.getSystemInfoSync();
			var navigationBarStyle = head.getNavigationBarStyle(_this, systemInfo);
			_this.offsetTop = _this.totalH + 5;
			console.log('collect_this', _this);
		},
		methods: {
			hideHandle () {
				this.isShow = false
				// 1隐藏
				uni.setStorageSync('showCollectMiniapp', 1)
			}
		}
	}
</script>

<style lang="stylus">
	.collect-miniapp
		position fixed
		top 10px
		right 10px
		z-index 999999999
		background #fbfbfb
		font-size 12px
		width 190px
		padding 5px 10px
		border-radius 4px
		color #333
		box-shadow 0 0 10px rgba(0, 0, 0, .15)
		.icon-sangedian
			font-size: 12px;
		.icon-cha1
			position absolute
			right 5px
			top 5px
			color #ccc
			&::after
				content ''
				position absolute
				top -5px
				right -5px
				bottom -5px
				left -5px
		.icon-arr-top
			position absolute
			right 45px
			top -20px
			color #fff
			font-size 32px
</style>
